本文共 91558 字，大约阅读时间需要 305 分钟。

需求：聊天模块，可以实现发送文字、表情、图片、文件

接收语音、视频、地图消息数据

语音通话、视频通话

思路：发送消息数据，通过成功回调，聊天框新增数据

效果

分为三部分

1. 左侧会话列表
2. 中部聊天列表
3. 右侧群组成员列表
   先来看看效果
   
   

抽出聊天部分模块悬浮效果

布局：左边固定大小，中间宽75%，可右展开

布局

   
   
     
    
         
     {
  {messagesHisMsgs}}     
    
     
         
    
         
              
     
             
      
                 
                        
       
                     
        
{ {item.una.slice(0,1)}}
                 
       
                 
                        
       
                     
        
 
         
 
           { {CurentTime(item.time)}}  
          { {item.una}}  
           
         
 
        
                     
        
 
         
 
           
          { {item.una}}  
           { {CurentTime(item.time)}}  
         
 
        
                 
       
                 
                        
       
                     
        
                     
        
                 
       
             
         
     
     
    
     
         
    
         
     
             
      撤回         
     
     
    
 
   

样式

//消息-聊天右侧聊天界面样式data(){
   return{
       messagesBoxSyle: {
             minWidth: '75%',          minHeight: '80vh',          // 'background-color': ' #b8e026'        },        //聊天或者文件        messagesOrFiles: 'messages',        messagesOrFilesActiveIndex: 'messages',        messagesSelectHanderMenu: 'messagesSelectHanderMenu',//选中文件样式        messagesNoSelectHanderMenu: 'messagesNoSelectHanderMenu',//选中文件样式        //展开按钮定位        messagesUnfoldSyle: {
             width: '35px',          height: '80px',          backgroundColor: '#DADADA',          borderRadius: '10px 0 0 10px',          position: 'absolute',          top: '50%',          right: '19%',          'z-index': '100',          cursor: 'pointer',          transform: 'translateY(-50%)',        },        //发送按钮样式        messagesBoxBigRightBotton: {
             position: 'absolute',          bottom: '6%',          right: '20%',        },    }

//头像.LeftmsgAvaterBox {
       width: 52px;    height: 51px;    background-color: #5a64c1;    border-radius: 50%;    float: left;}.RightmsgAvaterBox {
       width: 52px;    height: 51px;    background-color: #5a64c1;    border-radius: 50%;    float: right;}//聊天框.LeftmsgBoxOut {
       text-align: left;}.RightmsgBoxOut {
   text-align: right;}

表情处理

用图片匹配,显示到聊天列表的时候通过文字匹配替换即可

   
   
  
    
      
     
                
  
    
   
 import faceList from '../plugins/faceList';data(){
   return{
      faceList1: faceList,   }

选中表情

//选中表情      ChooseEmojis(index, name) {
           for (let i in this.faceList1) {
             if (index == i) {
               this.messagesContents += name;          }        }      },

聊天区域

通过v-html显示数据，处理文字、图片、文件等

data(){
   return{
      showMesDatas: [],   } }, method:{
       //选中会话，渲染聊天列表数据      /**       *       * @index index 当前选中index       * @param id 会话id       * @param name 会话名称       * @param number 会话号码       * @type type       */      selectThisSubIntoTmpTalkList(index, id, name, number, type) {
           this.messagesContents = '';//切换会话时，清空当前输入框        //阅读消息，让红点隐藏        let redConversationRecordList = this.conversationRecordList;        for (let item = 0; item < redConversationRecordList.length; item++) {
             //默认都为false,阅读消息时，改变状态，然后更新          let obj = redConversationRecordList[item];          for (let i in obj) {
               redConversationRecordList[index].newMsgStatus = false;          }        }        this.conversationRecordList = redConversationRecordList;        this.conversationId = id;        let tempTalkList = {
   };        let tak = {
   };        if (type == 0) {
             return;        }        var firstName = name.substr(0, 1);        var lastName = name.substr(1, 3);        if (tempTalkList[id] == null) {
             tempTalkList[id] = {
               id: id,            name: name,            number: number,            type: type,          };        } else {
             delete tempTalkList[id];        }        //样式切换        this.clickIndex = index;        //清空聊天对象数据        this.showMesDatas = '';        /*查看历史消息*/        //清空聊天对象数据        this.messagesHisMsgs = '查看历史消息';        var params = {
             userId: this.user.userId,          userType: 0,                                    //0-调度员，1-终端        };        for (var item in tempTalkList) {
             if (tempTalkList[item].id == null) {
               return false;          }          tak = {
               conversationId: tempTalkList[item].id,            name: tempTalkList[item].name,            number: tempTalkList[item].number,          };          params.conversationId = tempTalkList[item].id;          if (tempTalkList[item].type == 1) {
                  //终端            params.conversationType = 1;            this.conversationType = 1;            this.conversationId = tempTalkList[item].id;            this.conversationName = tempTalkList[item].name;            this.conversationNumber = tempTalkList[item].number;            tak.conversationType = 1;            this.toMsgPage(tak);            //当前选中终端，则不渲染成员列表            this.courentGroupMerbers = '';            this.merberListShow = false;            //隐藏展开按钮            this.messagesUnfoldCtl = false;            this.messagesBoxSyle.minWidth = '100%';            this.messagesUnfoldSyle.right = '0';            this.messagesBoxBigRightBotton.right = '2%';          } else if (tempTalkList[item].type == 2) {
           //群组            // this.getMessageNewsDatas()            params.conversationType = 2;            this.conversationType = 2;            tak.conversationType = 2;            //查询消息数据            this.toMsgPage(tak);            //查询成员列表数据            this.queryGroupMember(tempTalkList[item].id);            //存放当前组id            this.courentGroupId = tempTalkList[item].id;            this.conversationId = tempTalkList[item].id;            this.conversationName = tempTalkList[item].name;            this.conversationNumber = tempTalkList[item].number;            this.merberListShow = true;            this.messagesUnfoldCtl = true;            this.messagesBoxSyle.minWidth = '75%';            this.messagesUnfoldSyle.right = '19%';            this.messagesBoxBigRightBotton.right = '20%';            //释放展开按钮            this.messagesUnfoldCtl = true;            // return tak          }        }        this.getMessageFileDatas();      },    //查看历史记录      getTalkHistorys() {
           if (this.hisIndex == '') {
             return;        }        var params = {
             tempGroupId: this.conversationId,          gid: this.conversationId,          uid: this.conversationId,          did: this.user.userId,          index: this.hisIndex,          ps: 10,          flag: 2,          // MsgType:5        };        if (this.conversationType == 1) {
             params.type = 3;        } else if (this.conversationType > 1) {
             params.type = 0;        }        MessageApi.queryHisMsg(params).then(res => {
             // 返回数据          var msgHis = res.obj.list;          console.log(msgHis);          //PrintTime("获取历史记录："+msgHis.length+","+JSON.stringify(msgHis));          if (msgHis.length > 0) {
               this.showMsg(msgHis, 0);          } else {
               this.messagesHisMsgs = '没有更多历史消息';          }        }).catch(err => {
             // 异常情况        });      },    //展示消息      showMsg(msgList, flag) {
           var html = '';        let newMesList = msgList;        let newMesListA = [];        // for (let i = msgList.length - 1; i >= 0; i--) {
           for (let i = 0; i < msgList.length; i++) {
             newMesListA.push(this._hisDeal(msgList[i]));        }        for (let a = 0; a < newMesList.length; a++) {
             newMesList[a]['temporaryMes'] = newMesListA[a];        }        //展示聊天记录        if (flag == 1) {
             if (newMesList.length > 0) {
               for (let i = 0; i < newMesList.length; i++) {
                 this.showMesDatas.push(newMesList[0]);              break;            }          }          setTimeout(() => {
               var messageShowDiv = document.getElementById('msg_display');            messageShowDiv.scrollTop = messageShowDiv.scrollHeight;          });          this.preIndex = msgList[0].mid;        }        //初始化数据，默认展示最近一条数据        else if (flag == -1) {
             this.showMesDatas = newMesList;          let a = newMesList.length;          for (let i = 0; i < a; i++) {
               console.log('newMesList[a].time');            console.log(newMesList[0].time);            break;          }        }        //展示历史记录        else if (flag == 0) {
             for (let i = 0; i < newMesList.length; i++) {
               this.showMesDatas.unshift(newMesList[i]);          }          this.hisIndex = msgList[msgList.length - 1].mid;        }      }, }

撤回消息

//右击事件处理      rightMessageClick(msgId, uid) {
           console.log('右击事件');        this.withdrawMessageSmgId = msgId; //保存消息id        if (uid === this.user.userId) {
             this.setMsg(msgId);        } else {
             return;        }      },      //撤回，删除，取消      handelBackEvent(e, msgId) {
           let thisId = e.target.id;        switch (thisId) {
             case 'delMsg': //删除消息            this.delMsg(msgId);            break;          case 'withdrawMessage'://撤回消息            this.withdrawMessage(msgId);            break;          case 'cancelBack'://取消            $('#backMsg').remove();            console.log('cancelBack');            break;        }      },      setMsg(num) {
           $('#backMsg').remove();        var backMsghtml = '
   
    ' +            '
    删除' +            '
    撤回' +            '
    取消' +            '
   
';        $('#msg' + num).append(backMsghtml);      },      //删除消息(刪除当前列表数据，并没有删除数据库）      delMsg(msgId) {
           if (msgId != null && msgId != '') {
             console.log('当前选中消息对象' + msgId);          let deleteMesDatas = this.showMesDatas;          for (let i = 0; i < deleteMesDatas.length; i++) {
               if (JSON.stringify(deleteMesDatas[i]).indexOf(JSON.stringify(msgId)) != -1) {
                 deleteMesDatas.splice(i, 1);              this.withdrawMessageShow = false;              $('#backMsg').remove();              this.showMesDatas = deleteMesDatas;              $('#backMsg').remove();              break;            }          }        }      },      //取消消息      cancelBack(msgId) {
         },      //撤回消息      withdrawMessage(msgId) {
           if (msgId != null && msgId != '') {
             function findshowMes(findshowMesDatas) {
               for (let i = 0; i < findshowMesDatas.length; i++) {
                 if (findshowMesDatas[i].mid == msgId) {
                   var msgInfo = findshowMesDatas[i];                return msgInfo;                break;              }            }          }          let msgInfo = findshowMes(this.showMesDatas);          var MsgIndex;//消息编号          var TargetType;//对象类型	Int	0-终端 1-群组 2-调度员 3-临时组          var TargetInfo = {
   };//对象信息          if (msgInfo.gid === 0) {
               MsgIndex = msgInfo.mid;            TargetType = 0;            TargetInfo = {
                 UserID: msgInfo.uid,              UserNumber: this.conversationNumber,              UserName: msgInfo.una,            };          } else {
               MsgIndex = msgInfo.mid;            TargetType = 1;            TargetInfo = {
                 GroupID: msgInfo.gid,              GroupNumber: this.conversationNumber,              GroupName: msgInfo.gna,            };          }          let rspOBJ = DispatchmessageCtrl.backMsg(MsgIndex, TargetType, TargetInfo);          if (rspOBJ === 0) {
               // Dispatchmessage.backMsg(TargetInfo)      //处理消息撤回后的界面            let deleteMesDatas = this.showMesDatas;            console.log(deleteMesDatas);            for (let i = 0; i < deleteMesDatas.length; i++) {
                 if (JSON.stringify(deleteMesDatas[i]).indexOf(JSON.stringify(msgId)) != -1) {
                   deleteMesDatas.splice(i, 1);                console.log(deleteMesDatas);                this.withdrawMessageShow = false;                this.showMesDatas = deleteMesDatas;                this.getTalkHistorys();                $('#backMsg').remove();                break;              }            }          } else {
               // Dispatchmessage.backMsg(-1)            // 失败后的处理,参数传入-1            this.withdrawMessageShow = false;            this.$message.warning('撤回失败');            $('#backMsg').remove();          }        } else {
             $('#backMsg').remove();        }      },

发送文字

listen(event) {
           if (event.shiftKey && event.keyCode === 13) {
             console.log('33换行');          /* this.sendMessage(); // 发送文本           event.preventDefault(); // 阻止浏览器默认换行操作*/        } else if (event.keyCode === 13) {
             event.preventDefault(); // 阻止浏览器默认换行操作*/          this.sendMessage(); // 发送文本        }      }, sendMessage() {
           if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {
             this.$Message.error('请先选择会话组');          return;        } else {
             let obj = {
               conversationId: this.conversationId,            name: this.conversationName,            number: this.conversationNumber,            conversationType: this.conversationType,          };          // let msgstring = "8998"          let msgstring = this.messagesContents;          if (msgstring.length >= 512) {
               this.$Message.error('发送的消息过长');            return;          } else if (msgstring.trim() == '') {
               this.$Message.warning('请不要发送空白消息');            return;          } else {
               console.log('msgstring');            console.log(msgstring);            let user_id = this.user.userId;            DispatchmessageCtrl.sendMessage(obj, msgstring, user_id);          }        }      },

发送图片文件

   	
   
	
    	
    	 
     	     
      		 
     	 
     
      取 消
     	 
     
      发送
     	
    	
   
	
   	
   
	
    	
    	 
     	     
      	     
      
       将文件拖到此处，或
       点击上传
      
	  	 
     	 
     
      取 消
     	 
     
      发送
     	
    	
   

//上传图片      openUploadImgDialogVisible() {
           if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {
             this.$Message.error('请先选择会话组');          return;        } else {
             this.uploadImgDialogVisible = true;        }      }, //上传文件      openUploadFilesDialogVisible() {
           if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {
             this.$Message.error('请先选择会话组');          return;        } else {
             this.uploadFilesDialogVisible = true;        }      },      sendMessage() {
           if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {
             this.$Message.error('请先选择会话组');          return;        } else {
             let obj = {
               conversationId: this.conversationId,            name: this.conversationName,            number: this.conversationNumber,            conversationType: this.conversationType,          };          // let msgstring = "8998"          let msgstring = this.messagesContents;          if (msgstring.length >= 512) {
               this.$Message.error('发送的消息过长');            return;          } else if (msgstring.trim() == '') {
               this.$Message.warning('请不要发送空白消息');            return;          } else {
               console.log('msgstring');            console.log(msgstring);            let user_id = this.user.userId;            DispatchmessageCtrl.sendMessage(obj, msgstring, user_id);          }        }      },      //发送图片文件---------      //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用      changeUploadImg(file) {
           console.log(file);        //保存消息图片        // this.messageImgPost = file.raw;        const isJPG = file.raw.type === 'image/jpeg';        const isPNG = file.raw.type === 'image/png';        // const isLt2M = file.size / 1024 / 1024 < 2;        if (!isJPG && !isPNG) {
             this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');          //执行清空图片          // this.$refs.uploadPhoto.clearFiles();         // 取消时在文件列表中删除该文件          this.$refs.uploadPhoto.handleRemove(file);          return (isJPG || isPNG);        } else {
             this.newArrayImg.push(file.raw);          this.messageImgPost = this.newArrayImg;          console.log('this.messageImgPost');          console.log(this.messageImgPost);        }      },      //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用      changeUploadFiles(file) {
           this.newArrayFiles.push(file.raw);        this.messageFilesPost = this.newArrayFiles;        console.log('this.messageFilesPost');        console.log(this.messageFilesPost);      },      //取消上传图片      cancelUploadPhoto() {
           this.uploadImgDialogVisible = false;        //执行清空图片        this.$refs.uploadPhoto.clearFiles();      },      //取消上传文件      cancelUploadFile() {
           this.uploadFilesDialogVisible = false;        //执行清空文件列表        this.$refs.uploadFiles.clearFiles();      },      //上传发送图片      beforeUploadImg(file) {
           console.log('file');        console.log(file);        const isJPG = file.type === 'image/jpeg';        const isPNG = file.type === 'image/png';        // const isLt2M = file.size / 1024 / 1024 < 2;        if (!isJPG && !isPNG) {
             this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');          //执行清空图片          this.$refs.uploadPhoto.clearFiles();        }        return isJPG && isPNG;      },      //上传发送多图片      submitUpload() {
           let messageImgPostArray = this.messageImgPost;        if (messageImgPostArray.length > 0) {
             for (let i = 0; i < messageImgPostArray.length; i++) {
               let formData1 = new FormData();            formData1.append('pocFile', messageImgPostArray[i]);            MessageApi.upload(formData1).then(res => {
                 // 发送图片              this.relativePhotoUrl = res.obj.relativeUrl;              this.sendPhoto(res.obj.relativeUrl);              this.handleRemove();              //执行清空图片              this.$refs.uploadPhoto.clearFiles();              //关闭弹框              this.uploadImgDialogVisible = false;              this.messageImgPost = '';              //清空保存图片数组              this.newArrayImg = [];              console.log(this.messageImgPost);            }).catch(err => {
                 // 异常情况              this.$message.error('发送失败!');              //执行清空图片              this.$refs.uploadPhoto.clearFiles();              //关闭弹框              this.uploadImgDialogVisible = false;              this.messageImgPost = '';            });          }        } else {
             this.$Message.warning('请先选择图片');        }           },      //上传发送文件      submitUploadFile() {
           let messageFilesPostArray = this.messageFilesPost;        console.log('messageFilesPostArray');        console.log(messageFilesPostArray);        if (messageFilesPostArray.length > 0) {
             for (let i = 0; i < messageFilesPostArray.length; i++) {
               let formData = new FormData();            formData.append('pocFile', messageFilesPostArray[i]);            MessageApi.upload(formData).then(res => {
                 this.relativePhotoUrl = res.obj.relativeUrl;              this.sendfile(res.obj.relativeUrl, messageFilesPostArray[i].name);              this.handleRemove();              //执行清空文件              this.$refs.uploadFiles.clearFiles();              this.newArrayFiles = [];              //关闭弹框              this.uploadImgDialogVisible = false;              this.messageImgPost = '';            }).catch(err => {
                 // 异常情况              this.$message.error('发送失败!');              //执行清空文件              this.$refs.uploadFiles.clearFiles();              this.newArrayFiles = [];              //关闭弹框              this.uploadImgDialogVisible = false;              this.messageImgPost = '';            });          }        } else {
             this.$Message.warning('请先选择文件');        }      },      handleRemove(file, fileList) {
           console.log(file, fileList);      },      clearFilesPhoto() {
           console.log('clearFilesPhoto');      },      handlePictureCardPreview(file) {
           this.messageImgPost = file.url;        this.dialogVisible = true;      },      handlePreview(file) {
           console.log(file);      }      ,      //发送图片      sendPhoto(url) {
           let obj = {
             conversationId: this.conversationId,          name: this.conversationName,          number: this.conversationNumber,          conversationType: this.conversationType,        };        let user_id = this.user.userId;        DispatchmessageCtrl.sendPhoto(obj, url, user_id);      }

处理聊天记录

//处理聊天记录      _hisDeal(msg) {
           let html = '';        let emojiList = [          '[大笑]', '[可爱]', '[色]', '[嘘]', '[亲]', '[呆]', '[口水]', '[呲牙]', '[鬼脸]', '[害羞]',          '[偷笑]', '[调皮]', '[可怜]', '[敲]', '[惊讶]', '[流感]', '[委屈]', '[流泪]', '[嚎哭]', '[惊恐]',          '[怒]', '[酷]', '[不说]', '[鄙视]', '[阿弥陀佛]', '[奸笑]', '[睡着]', '[口罩]', '[努力]', '[抠鼻孔]',          '[疑问]', '[怒骂]', '[晕]', '[呕吐]', '[强]', '[弱]', '[OK]', '[拳头]', '[胜利]', '[鼓掌]',          '[发怒]', '[骷髅]', '[便便]', '[火]', '[溜]', '[爱心]', '[心碎]', '[钟情]', '[唇]', '[戒指]',          '[钻石]', '[太阳]', '[有时晴]', '[多云]', '[雷]', '[雨]', '[雪花]', '[爱人]', '[帽子]', '[皇冠]',          '[篮球]', '[足球]', '[垒球]', '[网球]', '[台球]', '[咖啡]', '[啤酒]', '[干杯]', '[柠檬汁]', '[餐具]',          '[汉堡]', '[鸡腿]', '[面条]', '[冰淇淋]', '[沙冰]', '[生日蛋糕]', '[蛋糕]', '[糖果]', '[葡萄]', '[西瓜]',          '[光碟]', '[手机]', '[电话]', '[电视]', '[声音开启]', '[声音关闭]', '[铃铛]', '[锁头]', '[放大镜]', '[灯泡]',          '[锤头]', '[烟]', '[炸弹]', '[枪]', '[刀]', '[药]', '[打针]', '[钱袋]', '[钞票]', '[银行卡]',          '[手柄]', '[麻将]', '[调色板]', '[电影]', '[麦克风]', '[耳机]', '[音乐]', '[吉他]', '[火箭]', '[飞机]',          '[火车]', '[公交]', '[轿车]', '[出租车]', '[警车]', '[自行车]', '[汗]', '[拜一拜]', '[惊喜]', '[流汗]',          '[卖萌]', '[默契眨眼]', '[烧香拜佛]', '[晚安]', '[握手]'];        var type = parseInt(msg.type);        let nginxIp = this.user.ip;        let port = 1603;        let msgType = 0;        let MsgNum = 0;        function returnHtml(isMine) {
             var bPoint, img, img_loc, yuyinUrl, times, durationHt, j, fileUrl;          var locPic = './images/message/msg_loc.png';          switch (type) {
               case 0:       //文字              var str = msg.mss.toString();              for (var i = 0; i < str.length; i++) {
                   var x = 0, y = 0, z = 0;                for (var j = 0; j < str.length; j++) {
                     if (str[j] === '[') {
                       x = j;                  }                  if (str[j] === '/') {
                       y = j;                  }                  if (str[j] === ']') {
                       z = j;                  }                  if (z != 0 && str[x + 1] === '2' && str[x + 2] === 'f' && y > x && y < z) {
                       str = str.substring(0, x) + '@' + str.substring(x + 3, y) + str.substring(z + 1, str.length);                  }                }              }              for (let i = 0; i < emojiList.length; i++) {
                   let emojiStr = emojiList[i];//[发怒];                for (var j = 0; j < str.length; j++) {
                     /*http://192.168.0.201:1603/Airport/images/emoji/emoji_*/                  str = str.replace(emojiStr,                      '');                              }              }              html += '' + str +                  '';              break;            case 1:             //图片              html += '';              // this.temporaryMes = html              break;            case 3:             //视频              html +=                  '
    ';              break;            case 104://位置消息 //4地图不考虑              if (ScsMapConstantTemp.mapType === 'openLayers') {
                   img = '';                img_loc = '';              } else {
                   bPoint = GpsConvert.gcj02tobd09(msg.lng / 100000, msg.lat / 100000);                img = '';                img_loc = '';              }              html +=                  // ''+img+msg.loc+img_loc+'';                  '地图';              break;            case 5:              var index = msg.url.indexOf('/');              var str0 = msg.url.substring(0, index);              str0 = parseInt(str0) + 1 + '';              var str1 = msg.url.substring(index);              var Url = str0 + str1;              msg.url = Url;              html +=                  '文件下载';              break;            case 99:              let cls = 'tar';              html = ' 
   
    ' +                  '
    
     
    
    
     ' + msg.una + '撤回了一条消息' + '
    
';              break;          }        }        function ScsMapConstantTemp() {
           };        ScsMapConstantTemp.mapType = 'baidu'; //"baidu" or "openLayers"        /*   if(typeof openLayersURL!="undefined"){             ScsMapConstantTemp.openLayersURL=openLayersURL;           }*/        if (msg.uid == this.user.userId) {
             returnHtml(true);        } else {
             returnHtml(false);        }        return html;      },
   

展示消息

//展示消息      showMsg(msgList, flag) {
           var html = '';        let newMesList = msgList;        let newMesListA = [];        for (let i = 0; i < msgList.length; i++) {
             newMesListA.push(this._hisDeal(msgList[i]));        }        for (let a = 0; a < newMesList.length; a++) {
             newMesList[a]['temporaryMes'] = newMesListA[a];        }        //展示聊天记录        if (flag == 1) {
             if (newMesList.length > 0) {
               for (let i = 0; i < newMesList.length; i++) {
                 this.showMesDatas.push(newMesList[0]);              break;            }          }          setTimeout(() => {
               var messageShowDiv = document.getElementById('msg_display');            messageShowDiv.scrollTop = messageShowDiv.scrollHeight;          });          this.preIndex = msgList[0].mid;        }        //初始化数据，默认展示最近一条数据        else if (flag == -1) {
             this.showMesDatas = newMesList;          let a = newMesList.length;          for (let i = 0; i < a; i++) {
               console.log('newMesList[a].time');            console.log(newMesList[0].time);            break;          }        }        //展示历史记录        else if (flag == 0) {
             for (let i = 0; i < newMesList.length; i++) {
               this.showMesDatas.unshift(newMesList[i]);          }          this.hisIndex = msgList[msgList.length - 1].mid;        }      },

完整代码

html

   
                
                    
    
                    
                         
     
                        
      
                            
       会话                        
      
                        
      
                            
                                   
                                       
                                    
                               
      
                        
      
                            
       
                                
        
 
          
        
                            
       
                        
      
                    
     
                    
                         
     
                        
                              
      
                            
       
                                
                                        
        
 
         
 
           
           
           
 
             
             
           
 
           
          
 
           
 
            
 
             { {item.name}} 
              
            
 
           
 
           
 
            
 
               { {item.msgString}}   
              
            
 
           
 
          
 
         
 
        
                                
        
 
          
         
 
           
              
            
            
             移除会话
             
            
           
         
 
        
                            
       
                        
      
                    
     
                
    
                
                    
    
                    
                         
     
                        
      
                            
       {
  {conversationName}}（{
  {courentGroupMerbers.length}}）                        
      
                        
      
                            
       
                                
        聊天                            
       
                            
                                   
       
                                
        文件                            
       
                            
       
                                
                                        
        
 
          
        
                            
       
                        
      
                    
     
                    
                         
     
                        
                              
      
                            
                                   
       
                                
        
 
          
          
        
                            
       
                            
                                   
       
                                
        
 
         { {messagesHisMsgs}} 
        
                                
                                        
        
 
          
         
 
          
 
            
           
 
            
{ {item.una.slice(0,1)}}
 
           
 
            
           
 
            
 
             
 
               { {CurentTime(item.time)}}  
              { {item.una}}  
               
             
 
            
 
            
 
             
 
               
              { {item.una}}  
               { {CurentTime(item.time)}}  
             
 
            
 
           
 
            
           
 
            
 
            
 
           
 
 
         
 
        
                                
                                        
        
 
         
 
          撤回 
         
 
        
                            
       
                            
                                   
       
                                
        
 
         
  
 
        
                            
       
                            
       
                                
                                        
        
 
         
 
           
          
 
            
          
 
           
          
 
            
            
             
              
             
            
             取 消
             
            
             发送
             
            
          
 
           
          
 
            
            
             
              
             
              将文件拖到此处，或
              点击上传
             
 
              
             
            
             取 消
             
            
             发送
             
            
          
 
           
           
         
 
        
                                
                                        
        
 
         
 
           
           
         
 
        
                                
        
 
         发送 
        
                            
       
                        
      
                        
                              
      
                            
       
                                
        
 
         
 
           
         
 
         
 
           
         
 
          成员列表  
        
                                
        
 
         
 
          
         
 
        
                            
       
                            
                                   
       
                                
                                        
        
 
         
 
          
 
           { {item.name.slice(0,1)}} 
          
 
         
 
         
 
          { {item.name}} 
         
 
         
 
         
 
        
                            
       
                        
      
                    
     
                    
     
                        
                                  
                                       
         
          
                                        
        
 
         
 
          时间: 
          { {CurentTime(item.time)}} 
         
 
        
                                
                                    
                               
                          
     
                
    
            
   

style

li {
       list-style: none;}.msgTime{
       font-size: 16px;}.msgUser{
       width: 50px;    height: 25px;    font-family: SourceHanSansCN-Medium;    font-size: 26px;    font-weight: normal;    font-stretch: normal;    letter-spacing: 0px;    color: #333333;}.msgContent{
       display: inline-block;    min-width: 98px;    min-height: 60px;    margin-top: 2%;    border-radius: 10px;    background-color: #5a64c1;    width: auto;    max-width: 500px;    font-family: SourceHanSansCN-Medium;    font-size: 26px;    font-weight: normal;    font-stretch: normal;    letter-spacing: 0px;    color: #e9e9e9; }.msgPhotoContent{
       max-width: 500px;}.msgFileContent{
       display: inline-block;    width: 230px;    height: 96px;    margin-top: 2%;    border-radius: 10px;    background-color: #efeff5;    /*max-width: 500px;*/    cursor: pointer;}.msgMapContent{
       width: 230px;    height: 96px;    background-color: #13134b;}.msgFilesImg{
       height:100%;    width: 100px;    float: left;}.downFiles{
       line-height: 96px;    color: #00a0e9;    font-size: 18px;    font-weight: bold;}.msgDrowBackContent{
       width: 100%;    height: 96px;    margin-top: 5%;} .RightmsgPhoto{
        /*float: right;*/ } .LeftmsgPhoto{
        /*float: right;*/ }.msgContentFontCtl{
       /*position: absolute;    top: 50%;    transform: translateY(-50%);*/}.tal{
       display: block;    /*height: 100vh;*/}.LeftmsgAvaterBox {
       width: 52px;    height: 51px;    background-color: #5a64c1;    border-radius: 50%;    float: left;}.RightmsgAvaterBox {
       width: 52px;    height: 51px;    background-color: #5a64c1;    border-radius: 50%;    float: right;}.LeftmsgTime {
       /*float: left;*/}.LeftmsgTimeText {
       /*float: left;*/    font-size: 20px;    margin-left: 5%;}.LeftmsgAvaterText {
       line-height: 40px;    text-align: center;    color: white;    font-family: SourceHanSansCN-Medium;    font-size: 26px;    font-weight: normal;    font-stretch: normal;}.LeftmsgBoxCtn {
       text-align: right;    word-break: break-all;    display: block;}.msgTimgAndName{
       height: 50px;    margin-top: 4%;}.msgAvaterBox {
       width: 52px;    height: 51px;    background-color: #5a64c1;    border-radius: 50%;    /*float: right;*/    display: inline-block;}.RightmsgTime {
       height: 40px;    /*float: right;*/    margin-left: 50%;}.RightmsgTimeText {
       float: right;    margin-right: 2%;    font-size: 20px}.RightmsgAvaterText {
       line-height: 40px;    text-align: center;    color: white;    font-size: 15px}.LeftmsgBoxOut {
       text-align: left;}.RightmsgBoxOut {
   text-align: right;}.RightmsgBoxCtn {
       text-align: left;    word-break: break-all;    display: block;}/**/.replaceMegImg {
       height: 35px;    width: 35px}.msgPhoto {
       /*height: 100px;*/    /*width:170px*/}.msgInputDown {
       width: 100%;    height: 100px;    z-index: 99999;}/*左侧B消息*/.messagesBoxdown80datas {
       height: 150px;    width: 1080px;    background-color: #4b6182;}.messagesBoxdown80datasCtl {
       float: right;    /*float: left;*/    background-color: #fff;    position: relative;    top: 20%;    transform: translateY(-50%);}.messagesBoxdown80datasAvater {
       width: 50px;    height: 50px;    border-radius: 50%;    background-color: #5D63C5;}.messagesBoxdown80datasText {
       height: 20px;    width: 60px;    background-color: #c12727;    position: absolute;    left: -100px;    top: 10px;}.messagesBoxdown80datasMessages {
       height: 20px;    width: 60px;    background-color: #c12727;    display: inline-block;    margin-top: 15px;    position: absolute;    left: -150px;}.messagesBoxdown80datasMessagesBox {
       height: 60px;    min-width: 150px;    background-color: #5A65C1;    border-radius: 10px;}/**/.messagesBox {
       height: 93%;    width: 100%;    background-color: #f5f5f5;    display: flex;    position: absolute;    top: 7%;}.messagesBox-left {
       width: 25%;    height: 100%;    background-color: #E2E3E7;}.messagesBox-BigRight {
       width: 75%;    /*background-color: #9fbd6e;*/}.messagesBox-center {
       width: 50%;    /*background-color: #9fbd6e;*/}.messagesBox-right {
       width: 25%;    /*background-color: #872306;*/}.messagesBox-left-top {
       height: 80px;    display: flex;    /*margin-top: 3%;*/    border-bottom: 1px solid #DADADA;    /*justify-content: space-between;*/    position: relative;}/*搜索框部分开始*/.messagesBox-left-topOne {
       width: 30%;    position: absolute;    top: 50%;    left: 5%;    transform: translateY(-50%);}.messagesBox-left-text {
       /*  position: absolute;      top: 50%;      left: 50%;      transform: translate(-50%, -50%);*/    font-family: SourceHanSansCN-Bold;    font-size: 26px;    font-weight: bold;    font-stretch: normal;    letter-spacing: 0px;    color: #666666;}.messagesBox-left-text {
       color: #7C7C7C;    font-size: 20px;    font-weight: bold;}.messagesBox-left-topTwo {
       width: 60%;    position: absolute;    top: 50%;    left: 20%;    transform: translateY(-50%);}.dataAvatarText {
       color: #ffffff;    font-weight: bold;    font-size: 18px;}.messagesBox-left-topTwo-input {
       height: 40px;    width: 300px;    border: none;    border-radius: 5px;    outline: none;}.messagesBox-left-topThree {
       width: 20%;    position: absolute;    top: 50%;    left: 90%;    transform: translateY(-50%);}.messagesBox-left-topThreeBtn {
       width: 40px;    height: 40px;    background-color: #fff;    position: relative;    border-radius: 5px;    cursor: pointer;}.messagesBox-left-topThreeBtn-controller {
       position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}/*搜索框部分结束*//*左侧数据区域开始*/.messagesBox-left-group {
       margin-top: 5%;    max-height: 86%;    overflow: auto;}.messagesBox-left-group-datas {
       height: 100px;    width: 100%;    /*background-color: #fff;*/    position: relative;    border-bottom: 1px solid #D9DADE;}.select-item {
       background-color: #DADADA;}.messagesBox-left-group-datas2 {
       height: 100px;    width: 100%;    background-color: #E2E3E7;    position: relative;}.messagesBox-left-group-datas-ctl {
       position: absolute;    top: 50%;    transform: translateY(-50%);    position: relative;    display: flex;}.messagesBox-left-group-datas-ctn {
       display: flex;}.messagesBox-left-group-datas-leftRight {
       display: flex;}.messagesBox-left-group-left {
       width: 70%;    cursor: pointer;    /*background-color: #de0e0e;*/}.messagesBox-left-group-right {
       width: 30%;}.messagesBox-left-group-leftContainer {
       display: flex;    /*height: 100px;*/    margin-left: 5%;    position: relative;}.messagesBox-left-group-leftContainerTwo {
       margin-left: 5%;}.messagesBox-left-group-leftContainText-msgString {
   }.messagesBox-left-group-leftContainText {
       display: flex;    flex-direction: column;    position: relative;}.messagesBox-left-group-leftContainText-one {
       /*  width: 200px;      margin-left: 30%;*/    font-family: SourceHanSansCN-Regular;    font-size: 20px;    font-weight: bold;    font-stretch: normal;    letter-spacing: 0px;    color: #333333;}.messagesBox-left-group-leftContainText-msgString {
       /*  width: 200px;      margin-left: 30%;*/    font-family: SourceHanSansCN-Regular;    font-size: 20px;    font-weight: bold;    font-stretch: normal;    letter-spacing: 0px;    color: #999999;}.groupImg {
       width: 80px;    height: 80px;}.messagesBox-left-group-leftContainText-two {
       font-size: 10px;    color: #9a9ac6;    margin-top: 5%;}.messagesBox-left-group-leftContainerControl {
       position: absolute;    top: 30%;    left: 30%;    transform: translateY(-50%);}.messagesBox-left-group-msgString {
       position: absolute;    top: 70%;    left: 30%;    transform: translateY(-50%);}.messagesBox-left-group-right {
       position: relative;}.messagesBox-left-group-rightBox {
       position: absolute;    right: 10%;    cursor: pointer;}.messagesBox-left-group-datas3 {
       height: 100px;    width: 100%;    /*background-color: #e32929;*/    position: relative;}.messagesBox-left-group-datas3-ctl {
       position: absolute;    top: 50%;    transform: translateY(-50%);    position: relative;    display: flex;}/*左侧数据区域结束*//*右侧开始*/.messagesBox-BigRight-top {
       display: flex;    height: 80px;    line-height: 80px;    background-color: #F5F5F5;    /*justify-content: space-between;*/    border-bottom: 1px solid #ECECEC;}.messagesBox-BigRight-topLeft {
       margin-left: 2%;    width: 75%;    font-family: SourceHanSansCN-Bold;    font-size: 26px;    font-weight: bold;    font-stretch: normal;    letter-spacing: 0px;    color: #666666;}.messagesBox-BigRight-topRight {
       display: flex;    width: 25%;    /*margin-right: 5%;*/    /*justify-content: space-between;*/}.messagesBox-BigRight-topRight-chat {
       display: flex;    /*justify-content: space-between;*/}.messagesBox-BigRight-topRight-chat-one {
       width: 25%;}.messagesSelectHanderMenu {
       width: 25%;    cursor: pointer;    font-family: SourceHanSansCN-Bold;    font-size: 26px;    font-weight: bold;    font-stretch: normal;    letter-spacing: 0px;    color: #666666;}.messagesNoSelectHanderMenu {
       width: 25%;    cursor: pointer;    font-family: SourceHanSansCN-Bold;    font-size: 26px;    font-weight: bold;    font-stretch: normal;    letter-spacing: 0px;    color: #999999;}.messagesBox-BigRight-topRight-chat-two {
       /*margin-left: 5%;*/    width: 25%;}.messageFile:hover {
       cursor: pointer;    /*color: #f60000;*/}.messagesBox-BigRight-topRight-setting {
       width: 50%;    /*margin-left: 20%;*/    /*background-color: #e76a6a;*/    position: relative;}.messagesBox-BigRight-topRight-settingIcon {
       position: absolute;    top: 50%;    right: 0;    transform: translateY(-30%);}.messagesBox-BigRight-down {
       display: flex;    height: 75vh;    /*min-height: 80vh;*/    overflow: hidden;}/*聊天界面----设置最小宽度*/.messagesBox-BigRight-down-chat {
       min-width: 75%;    /*background-color: #b8e026;*/}.messagesBox-BigRight-down-memberList {
       background-color: #f5f5f5;    min-width: 25%;    height: 85vh;    border-left: 1px solid #E2E3E7;}.messagesBox-BigRight-down-memberList-top {
       height: 80px;    background-color: #ECECEC;    display: flex;    flex-direction: row;    /*line-height: 80px;*/    position: relative;}.messagesBox-BigRight-down-memberList-topLeft {
       display: flex;    position: absolute;    top: 50%;    left: 2%;    transform: translateY(-50%);}.messagesBox-BigRight-down-memberList-topRight {
       position: absolute;    top: 50%;    right: 2%;    transform: translateY(-50%);    cursor: pointer;}.messagesBox-BigRight-down-memberList-topRight-Ctl {
   }.el-icon-search {
       top: 50%;    left: 50%;    transform: translate(-50%, -50%);}.messagesBox-BigRight-down-memberList-topLeftText {
       font-size: 20px;    margin-top: 10px;}.sendMessageBtn {
       cursor: pointer;    width: 139px;    height: 50px;    background-color: #5a64c1;    border-radius: 10px;    font-size: 20px;    color: #edfff3;    border: 1px solid #5A65C1;    outline: none;}.messagesBox-BigRight-down-memberList-container {
       max-height: 90%;    overflow: auto;}.messagesBox-BigRight-down-memberList-containerBox {
       margin-top: 5%;    height: 60px;    display: flex;    position: relative;}.messagesBox-BigRight-down-memberList-container0ne {
       position: absolute;    top: 50%;    left: 2%;    transform: translateY(-50%);}.messagesBox-BigRight-down-memberList-container0ne-Avatar {
       width: 50px;    height: 50px;    border-radius: 50%;    background-color: #5D63C5;    position: relative;}.messagesBox-BigRight-down-memberList-container0ne-AvatarText {
       position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    color: #ffffff;}.messagesBox-BigRight-down-memberList-containerTwo {
       position: absolute;    top: 50%;    left: 20%;    transform: translateY(-50%);    font-family: SourceHanSansCN-Medium;    font-size: 26px;    font-weight: normal;    font-stretch: normal;    letter-spacing: 0px;    color: #666666;}.messagesBox-BigRight-down-memberList-containerThree {
       position: absolute;    top: 50%;    right: 2%;    transform: translateY(-50%);}/*聊天界面*/.messagesBox-BigRight-down80 {
       height: 72%;    background-color: #f5f5f5;    overflow: hidden;}.data02RightMsg {
       font-size: 10px;    margin-right: 5px}.data02LeftMsg {
       font-size: 10px;    margin-left: 5px}.messagesBox-BigRight-down20 {
       height: 20%;    /*background-color: #37cb27;*/    z-index: 999;}.messagesBox-BigRight-down20-up {
       height: 60px;    background-color: #f5f5f5;    border-top: 1px solid #E2E3E7;}.messagesBox-BigRight-downFile {
       display: flex;    z-index: 9999;}.messagesBox-BigRight-downFileBox {
       margin-left: 5px;    cursor: pointer;}.messagesBox-BigRight-down20-input {
       height: 30vh;    background-color: #f5f5f5;}.messagesBox-BigRight-down20-botton {
       position: absolute;    bottom: 4%;    right: 20%;    /*transform: translateY(-50%);*/}/*左聊天*/.messagesBox-BigRight-down80-contain {
       /*background-color: #fff;*/    height: 620px;    overflow: auto;    z-index: -1;    flex-direction: column;}/*撤回消息*/.withdrawMessageStyle {
       height: 100px;    height: 30px;    position: absolute;    top: 40%;    left: 70%;    /*transform: translate(-50%, -50%);*/    background-color: #797979;    z-index: 999;}.cursorText {
       width: 50px;    cursor: pointer;}/*撤回消息*/.messagesBox-BigRight-down80-datas {
       height: 150px;    background-color: #fff;    display: flex;    position: relative;}.messagesBox-BigRight-down80-datas-container0ne-Avatar {
       width: 50px;    height: 50px;    border-radius: 50%;    background-color: #5D63C5;    position: relative;}.messagesBox-BigRight-down80-datas-container0ne-AvatarText {
       position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}.messagesBox-BigRight-down80-datas-container0ne {
       position: absolute;    top: 50%;    left: 2%;    transform: translateY(-50%);}.messagesBox-BigRight-down80-datas-containerTwo {
       position: absolute;    top: 50%;    left: 10%;    transform: translateY(-50%);}.messagesBox-BigRight-down80-datas-containerMessages {
       position: absolute;    top: 62%;    left: 10%;}.messagesBox-BigRight-down80-datas-containerMessagesBox {
       height: 60px;    width: 100%;    background-color: #5A65C1;    border-radius: 10px;}/*右聊天*/.messagesBox-BigRight-down80-datas-container0neR {
       position: absolute;    top: 50%;    right: 2%;    transform: translateY(-50%);}.messagesBox-BigRight-down80-datas-container0ne-AvatarR {
       width: 50px;    height: 50px;    border-radius: 50%;    background-color: #5D63C5;    position: relative;}.messagesBox-BigRight-down80-datas-containerTwoR {
       position: absolute;    top: 50%;    right: 10%;    transform: translateY(-50%);}.messagesBox-BigRight-down80-datas-containerMessagesR {
       position: absolute;    top: 62%;    right: 10%;}.messagesBox-BigRight-down80-datas-containerMessagesBoxR {
       height: 60px;    width: 100%;    background-color: #5A65C1;    border-radius: 10px;}/*右侧结束*/.msgContent {
       /* display: inline-block;     max-width: 300px;     font-size: 14px;*/    /*border: 1px solid #ddd;*/    /*background: #f5f5f5;*/    /* border-radius: 3px;     padding: 5px;     vertical-align: top;*/    cursor: pointer;    color: #edfff3;}.el-textarea__inner {
       background-color: #f5f5f5 !important;}.showHisMsgs {
       position: absolute;    left: 50%;    top: 10%;    /*transform: translateX(-50%);*/    z-index: 99;    cursor: pointer;}.showHisTime {
       position: absolute;    left: 50%;    top: 30%;    /*transform: translateX(-50%);*/    z-index: 99;    cursor: pointer;}

data() {
         return {
         //消息-聊天右侧聊天界面样式        messagesBoxSyle: {
             minWidth: '75%',          minHeight: '80vh',          // 'background-color': ' #b8e026'        },        //聊天或者文件        messagesOrFiles: 'messages',        messagesOrFilesActiveIndex: 'messages',        messagesSelectHanderMenu: 'messagesSelectHanderMenu',//选中文件样式        messagesNoSelectHanderMenu: 'messagesNoSelectHanderMenu',//选中文件样式        //展开按钮定位        messagesUnfoldSyle: {
             width: '35px',          height: '80px',          backgroundColor: '#DADADA',          borderRadius: '10px 0 0 10px',          position: 'absolute',          top: '50%',          right: '19%',          'z-index': '100',          cursor: 'pointer',          transform: 'translateY(-50%)',        },        //发送按钮样式        messagesBoxBigRightBotton: {
             position: 'absolute',          bottom: '6%',          right: '20%',        },        //会话列表数据        conversationRecordList: [],        //会话列表数据        conversationRecordListMsg: [],        //会话红点隐藏        indexHidden: false,        //判断当前点击标签        clickIndex: '',        //消息内容        messgaeSearchName: '',        //消息内容        messagesContents: '',        messagesContentsMaxLength: 240,        //文件弹框        SendandreceivefilesShow: false,        //文件数据        SendandreceivefilesDatas: '',        getBrowString: '',        imgList: [],        //临时消息图片        messageImgPostD: '',        //临时消息图片        messageImgPost: [],        //临时消息文件        messageFilesPost: [],        newArrayImg: [],//临时存放图片数组        newArrayFiles: [],//临时存放文件数组        //相对路径图片地址        relativePhotoUrl: '',        limitImgShow: false,        //图片和文件选择框        emojiListDialogVisible: false,        uploadImgDialogVisible: false,        uploadFilesDialogVisible: false,        // emojiList: emojiJSON,        faceList1: faceList,        //http请求临时消息        temporaryMes: '',        showMesDatas: [],        messagesHisMsgs: '',//历史消息        withdrawMessageShow: false,//撤回消息模型        backMsghtml: '',//撤回消息模型        withdrawMessageSmgId: '',//撤回消息id        con: [],        conversationId: '',//会话id        conversationName: '',//会话名称        conversationNumber: '',//会话号码        hisIndex: '',//用于查询历史记录的msgIndex        preIndex: '',//用于加载聊天记录的msgIndex        talkId: '',    //用于存放当前聊天对象id        conversationType: '',    //聊天类型，用于会话群组或终端区分        courentGroupMerbers: '',    //去、当前选中会话成员        openDownSelected: true,    //展开会话成员        courentGroupId: '',    //存放当前组id        temporaryImgemo: [],        emojiList2: [          '[大笑]', '[可爱]', '[色]', '[嘘]', '[亲]', '[呆]', '[口水]', '[呲牙]', '[鬼脸]', '[害羞]',          '[偷笑]', '[调皮]', '[可怜]', '[敲]', '[惊讶]', '[流感]', '[委屈]', '[流泪]', '[嚎哭]', '[惊恐]',          '[怒]', '[酷]', '[不说]', '[鄙视]', '[阿弥陀佛]', '[奸笑]', '[睡着]', '[口罩]', '[努力]', '[抠鼻孔]',          '[疑问]', '[怒骂]', '[晕]', '[呕吐]', '[强]', '[弱]', '[OK]', '[拳头]', '[胜利]', '[鼓掌]',          '[发怒]', '[骷髅]', '[便便]', '[火]', '[溜]', '[爱心]', '[心碎]', '[钟情]', '[唇]', '[戒指]',          '[钻石]', '[太阳]', '[有时晴]', '[多云]', '[雷]', '[雨]', '[雪花]', '[爱人]', '[帽子]', '[皇冠]',          '[篮球]', '[足球]', '[垒球]', '[网球]', '[台球]', '[咖啡]', '[啤酒]', '[干杯]', '[柠檬汁]', '[餐具]',          '[汉堡]', '[鸡腿]', '[面条]', '[冰淇淋]', '[沙冰]', '[生日蛋糕]', '[蛋糕]', '[糖果]', '[葡萄]', '[西瓜]',          '[光碟]', '[手机]', '[电话]', '[电视]', '[声音开启]', '[声音关闭]', '[铃铛]', '[锁头]', '[放大镜]', '[灯泡]',          '[锤头]', '[烟]', '[炸弹]', '[枪]', '[刀]', '[药]', '[打针]', '[钱袋]', '[钞票]', '[银行卡]',          '[手柄]', '[麻将]', '[调色板]', '[电影]', '[麦克风]', '[耳机]', '[音乐]', '[吉他]', '[火箭]', '[飞机]',          '[火车]', '[公交]', '[轿车]', '[出租车]', '[警车]', '[自行车]', '[汗]', '[拜一拜]', '[惊喜]', '[流汗]',          '[卖萌]', '[默契眨眼]', '[烧香拜佛]', '[晚安]', '[握手]'],        // 控制聊天成员列表的显示与隐藏        merberListShow: true,        messagesUnfoldCtl: true,//群组会话时允许展开，终端则不允许        uploadImgapi: 'http://192.168.0.201:1603/scs/pocMss/upload',        checked: false,      } }

js

watch: {
         //监听限制消息输入框长度      messagesContents() {
           console.log(this.messagesContents.length);        console.log(this.getStringLength(this.messagesContents));        console.log(this.messagesContents);        let maxLength = this.getStringLength(this.messagesContents);        if (maxLength > this.messagesContentsMaxLength) {
             // this.$Message.warning("输入内容过多");          this.messagesContents = this.messagesContents.substring(0, this.messagesContentsMaxLength);        }      },    },    methods: {
        //获取当前时间      CurentTime(date) {
           var now;        if (date == undefined) {
             now = new Date();        } else {
             now = new Date(date);        }        var year = now.getFullYear();    //年        var month = now.getMonth() + 1;    //月        var day = now.getDate();    //日        var hh = now.getHours();        //时        var mm = now.getMinutes();         //分        var ss = now.getSeconds();         //秒        var clock = year + '/';        if (month < 10) {
             clock += '0';        }        clock += month + '/';        if (day < 10) {
             clock += '0';        }        clock += day + ' ';        if (hh < 10) {
             clock += '0';        }        clock += hh + ':';        if (mm < 10) clock += '0';        clock += mm;        /*if (ss < 10) clock += '0';        clock += ss;*/        return (clock);      },      //消息布局样式处理      handleMessagesUnfoldSyle() {
           this.merberListShow = !this.merberListShow;        //改变聊天界面宽度        if (this.messagesBoxSyle.minWidth === '75%') {
             this.messagesBoxSyle.minWidth = '100%';          this.messagesUnfoldSyle.right = '5px';          this.messagesBoxBigRightBotton.right = '1%';        } else {
             this.messagesBoxSyle.minWidth = '75%';          this.messagesUnfoldSyle.right = '18.7%';          this.messagesBoxBigRightBotton.right = '20%';        }      },      //切换文件或消息菜单      messagechangeNav(indexName) {
           this.messagesOrFiles = indexName;        this.messagesOrFilesActiveIndex = indexName;      },      //点击消息时      getMessageNewsDatas() {
           // this.messagesUnfoldCtl = true      },      //获取文件数据      getMessageFileDatas() {
           this.SendandreceivefilesDatas = '';        //文件弹框列表        this.SendandreceivefilesShow = true;        if (this.hisIndex == '') {
             return;        }        var params = {
             tempGroupId: this.conversationId,          gid: this.conversationId,          uid: this.conversationId,          did: this.user.userId,          // index: this.hisIndex,          ps: 20,          flag: 2,          MsgType: 5,        };        if (this.conversationType == 1) {
             params.type = 3;        } else if (this.conversationType > 1) {
             params.type = 0;        }        /*    if (this.conversationType == 1) {              params.type = 3            } else if (this.conversationType > 1) {              params.type = 0            }            console.log('历史记录参数')            console.log(params)*/        MessageApi.queryHisMsg(params).then(res => {
             // 返回数据          var msgHis = res.obj.list;          //PrintTime("获取历史记录："+msgHis.length+","+JSON.stringify(msgHis));          if (msgHis.length > 0) {
               this.SendandreceivefilesDatas = msgHis;          } else {
             }        }).catch(err => {
             // 异常情况        });      },      //处理下载url,str:字符串，c处理字符串，n出现位置      dealDownloadUrl(str, c, n) {
           let x = str.indexOf(c);        for (let i = 0; i < n; i++) {
             x = str.indexOf(c, x + 1);        }        return x;      },      //文件下载      handleFileDownland(currentUrl) {
           let index = this.dealDownloadUrl(currentUrl, '/', 0);        let url = currentUrl.substring(0, index);        let Url = currentUrl.substring(index);        url = parseInt(url) + 1;        // let url  = "http://192.168.0.201:8081/upload//2020-07-29//80c47d710c714d428eef472afbe0af76.jsp"        let ipUrl = 'http://' + this.user.ip + ':' + url + Url;        let a = document.createElement('a');        //        a.setAttribute('download', '');        a.href = ipUrl;        a.click();        /*        let url = window.URL.createObjectURL(new Blob([currentUrl]))                let link = document.createElement('a')                link.style.display = 'none'                link.href = url                link.setAttribute('download', 'fileName')// 文件名                document.body.appendChild(link)                link.click()                document.body.removeChild(link) // 下载完成移除元素                window.URL.revokeObjectURL(url) // 释放掉blob对象*/      },      //文件关闭      closeMessageFileDatas() {
           this.messagesUnfoldCtl = true;      },      //更多      handleFileClickMore() {
         },      //删除会话      handleMessageCommand(command, id, type) {
           if (command === 'deleteConversation') {
             this.$Modal.confirm({
               title: '删除',            content: '确定删除吗？',            onOk: () => {
                 MessageApi.deleteConversationRecord({
                   conversationId: id,                conversationType: type,                userId: this.user.userId,                userType: 0,              }).then(res => {
                   // 返回数据                // this.$Modal.remove();                this.$Message.success('删除成功');                this.queryConversationRecordList();              }).catch(err => {
                   // 异常情况                this.$Message.error('删除失败');              });            },          });        }      },      //获取会话列表      queryConversationRecordList() {
           MessageApi.queryConversationRecordList({
             userId: this.user.userId,//          userType: 0,          conversationName: this.messgaeSearchName,        }).then(res => {
             // 返回数据          //定义保存会话数组对象          let newConversationRecordList = [];          let arrObj = res.obj;          let tempTalkList = [];          let tak = {
   };          for (let i = 0; i < arrObj.length; i++) {
               newConversationRecordList.push(arrObj[i]);            tak = {
                 conversationId: arrObj[i].conversationId,              name: arrObj[i].name,              number: arrObj[i].number,              conversationType: arrObj[i].conversationType,            };            tempTalkList.push(tak);          }          /*       console.log('tempTalkList');                 console.log(tempTalkList);                 console.log('tak');                 console.log(tak);*/          /*     for (let c =0; c
   
     10) {
                     newConversationRecordList[a].msgString = newConversationRecordList[a].msgString.substring(0, 10) +                      '...';                } else {
                     newConversationRecordList[a].msgString = newConversationRecordList[a].msgString;                }              }            }            //保存新会话列表对象            this.conversationRecordList = newConversationRecordList;          } else {
               /*   console.log('走else');               for (let a = 0; a < newConversationRecordList.length; a++) {                 for (let m =0;m
    
      10) {
                     newConversationRecordList[a].msgString = newConversationRecordList[a].msgString.substring(0, 10) +                      '...';                } else {
                     newConversationRecordList[a].msgString = newConversationRecordList[a].msgString;                }              }              //两者相对比，重置消息状态              for (let i = 0; i < oldConversationRecordList.length; i++) {
                   if (JSON.stringify(oldConversationRecordList[i]).                    indexOf(JSON.stringify(newConversationRecordList[a].conversationId)) != -1) {
                     if (oldConversationRecordList[i].conversationId == newConversationRecordList[a].conversationId) {
                       if (oldConversationRecordList[i].newMsgStatus === true) {
                         newConversationRecordList[a]['newMsgStatus'] = true;                      break;                    } else {
                         newConversationRecordList[a]['newMsgStatus'] = false;                      break;                    }                  }                } else {
                     // console.log('elseelseelseelseelse')                }              }            }            //保存新会话列表对象            this.conversationRecordList = newConversationRecordList;          }        }).catch(err => {
             // 异常情况        });      },      //选中会话，渲染聊天列表数据      /**       *       * @index index 当前选中index       * @param id 会话id       * @param name 会话名称       * @param number 会话号码       * @type type       */      selectThisSubIntoTmpTalkList(index, id, name, number, type) {
           this.messagesContents = '';//切换会话时，清空当前输入框        //阅读消息，让红点隐藏        let redConversationRecordList = this.conversationRecordList;        for (let item = 0; item < redConversationRecordList.length; item++) {
             //默认都为false,阅读消息时，改变状态，然后更新          let obj = redConversationRecordList[item];          for (let i in obj) {
               redConversationRecordList[index].newMsgStatus = false;          }        }        this.conversationRecordList = redConversationRecordList;        this.conversationId = id;        let tempTalkList = {
   };        let tak = {
   };        if (type == 0) {
             return;        }        var firstName = name.substr(0, 1);        var lastName = name.substr(1, 3);        if (tempTalkList[id] == null) {
             tempTalkList[id] = {
               id: id,            name: name,            number: number,            type: type,          };        } else {
             delete tempTalkList[id];        }        //样式切换        this.clickIndex = index;        //清空聊天对象数据        this.showMesDatas = '';        /*查看历史消息*/        //清空聊天对象数据        this.messagesHisMsgs = '查看历史消息';        var params = {
             userId: this.user.userId,          userType: 0,                                    //0-调度员，1-终端        };        for (var item in tempTalkList) {
             if (tempTalkList[item].id == null) {
               return false;          }          tak = {
               conversationId: tempTalkList[item].id,            name: tempTalkList[item].name,            number: tempTalkList[item].number,          };          params.conversationId = tempTalkList[item].id;          if (tempTalkList[item].type == 1) {
                  //终端            params.conversationType = 1;            this.conversationType = 1;            this.conversationId = tempTalkList[item].id;            this.conversationName = tempTalkList[item].name;            this.conversationNumber = tempTalkList[item].number;            tak.conversationType = 1;            this.toMsgPage(tak);            //当前选中终端，则不渲染成员列表            this.courentGroupMerbers = '';            this.merberListShow = false;            //隐藏展开按钮            this.messagesUnfoldCtl = false;            this.messagesBoxSyle.minWidth = '100%';            this.messagesUnfoldSyle.right = '0';            this.messagesBoxBigRightBotton.right = '2%';          } else if (tempTalkList[item].type == 2) {
           //群组            // this.getMessageNewsDatas()            params.conversationType = 2;            this.conversationType = 2;            tak.conversationType = 2;            //查询消息数据            this.toMsgPage(tak);            //查询成员列表数据            this.queryGroupMember(tempTalkList[item].id);            //存放当前组id            this.courentGroupId = tempTalkList[item].id;            this.conversationId = tempTalkList[item].id;            this.conversationName = tempTalkList[item].name;            this.conversationNumber = tempTalkList[item].number;            this.merberListShow = true;            this.messagesUnfoldCtl = true;            this.messagesBoxSyle.minWidth = '75%';            this.messagesUnfoldSyle.right = '19%';            this.messagesBoxBigRightBotton.right = '20%';            //释放展开按钮            this.messagesUnfoldCtl = true;            // return tak          }        }        this.getMessageFileDatas();      },      //搜索会话数据      handleMessgaeSearchName() {
           this.queryConversationRecordList();      },      //添加会话准备      preConversationRecord() {
           //从公共组件选择成员，只能选择终端        this.addOrUpdateVisible = true;        this.type = 'messagesAddConversationRecord';      },      //添加会话      addConversationRecord(choosedDatas) {
           //从公共组件选择，添加群组，或者终端        let groupId = this.courentGroupId;        //业务;点击添加，判断当前会话是否存在，若不存在，则新建        //判断选择的是群组还是终端，按条件新建，只支持单一新建        if (choosedDatas.length > 0) {
             for (let i = 0; i < choosedDatas.length; i++) {
               let params = {
                 conversationId: '',//当前会话id              conversationType: 1, //会话类型 //1:终端，2：群组，3：会话/自建组              userId: this.user.userId, //用户id              userType: 0, //0-调度员，1-终端            };            params.conversationId = choosedDatas[i].id;            if (choosedDatas[i].type == 2) {
                  //终端              params.conversationType = 1;            } else if (choosedDatas[i].type == 3) {
           //群组              params.conversationType = 2;            }            MessageApi.addConversationRecord(params).then(res => {
                 if (res.success) {
                   //刷新会话列表                this.queryConversationRecordList();              } else {
                   this.$message.error(res.msg);              }            }).catch(err => {
                 // 异常情况            });          }        }      },      //展开会话成员      handleOpenDownSelected() {
           //从公共组件选择成员，只能选择终端        this.openDownSelected = !this.openDownSelected;      },      //添加会话成员准备      preGroupMember() {
           //从公共组件选择成员，只能选择终端        this.addOrUpdateVisible = true;        this.type = 'messagesAddMerber';      },      //添加会话成员      addGroupMember(choosedDatas) {
           //从公共组件选择成员，只能选择终端        let groupId = this.courentGroupId;        if (choosedDatas.length > 0) {
             for (let i = 0; i < choosedDatas.length; i++) {
               if (choosedDatas[i].type === 3) {
                 this.$Message.warning('自动过滤群组');              return;            } else {
                 let courentGroupMerbers = this.courentGroupMerbers;              for (let a = 0; a < courentGroupMerbers.length; a++) {
                   if (choosedDatas[i].id === courentGroupMerbers[i].subId) {
                     this.$Message.error(courentGroupMerbers[i].name + '已存在该会话');                  return;                } else {
                     MessageApi.addGroupMember({
                       groupId: groupId,                    subscriberIds: choosedDatas[i].id,                  }).then(res => {
                       //刷新当前组数据                    this.queryGroupMember(groupId);                  }).catch(err => {
                       // 异常情况                  });                }              }            }          }        }      },      //查询成员数据      queryGroupMember(groupId) {
           MessageApi.queryGroupMember({
             groupId: groupId,        }).then(res => {
             this.courentGroupMerbers = res.rows;        }).catch(err => {
             // 异常情况        });      },      getFaceList() {
           this.faceList1 = faceList;      },      //获取上一条消息接口，场景：点击群组或用户时调用      conversationMsg(talkObj) {
           if (talkObj == null) {
             return;        }        this.talkId = talkObj.conversationId;        var params = {
             tempGroupId: talkObj.conversationId,          gid: talkObj.conversationId,          uid: talkObj.conversationId,          did: this.user.userId,//当前用户登录id          flag: 2,        };        if (talkObj.conversationType == 1) {
             params.type = 3;        } else if (talkObj.conversationType > 1) {
             params.type = 0;        }        var gmList = [];        MessageApi.queryLastMsgIndex(params).then(res => {
             if (res.obj != null) {
               gmList = res.obj.gmList;          }          if (res.obj != null              && res.obj.msgIndexMap != null) {
               let nesDtas = res.obj.msgIndexMap;            this.conversationRecordListMsg.push(nesDtas);          }        }).catch(err => {
             // 异常情况        });      },      //获取上一条消息接口，场景：点击群组或用户时调用      toMsgPage(talkObj) {
           if (talkObj == null) {
             return;        }        this.talkId = talkObj.conversationId;        var params = {
             tempGroupId: talkObj.conversationId,          gid: talkObj.conversationId,          uid: talkObj.conversationId,          did: this.user.userId,//当前用户登录id          flag: 2,        };        if (talkObj.conversationType == 1) {
             params.type = 3;        } else if (talkObj.conversationType > 1) {
             params.type = 0;        }        var gmList = [];        MessageApi.queryLastMsgIndex(params).then(res => {
             if (res.obj != null) {
               gmList = res.obj.gmList;          }          if (res.obj != null              && res.obj.msgIndexMap != null) {
               this.hisIndex = res.obj.msgIndexMap.mid;            this.preIndex = res.obj.msgIndexMap.mid;            let nesDtas = res.obj.msgIndexMap;            let arry2 = [];            arry2.push(nesDtas);            // preHt += plateA._hisDeal(res.obj.msgIndexMap);            this.showMsg(arry2, -1);          }        }).catch(err => {
             // 异常情况        });      },      //获取上一条消息接口，场景：点击群组或用户时调用      queryLastMsgIndex() {
           var preHt = '';        var gmList = [];        MessageApi.queryLastMsgIndex({
             did: this.user.userId,          flag: 2,          gid: 18696,          ps: 10,          tempGroupId: 18696,          type: 3,          uid: 18696,        }).then(res => {
             if (res.obj != null) {
               gmList = res.obj.gmList;          }          if (res.obj != null              && res.obj.msgIndexMap != null) {
               this.hisIndex = res.obj.msgIndexMap.mid;            this.preIndex = res.obj.msgIndexMap.mid;            let nesDtas = res.obj.msgIndexMap;            let arry2 = [];            arry2.push(nesDtas);            // preHt += plateA._hisDeal(res.obj.msgIndexMap);            this.showMsg(arry2, 1);          }        }).catch(err => {
             // 异常情况        });      },      // 检测数组标记红点      /*this.isHasObj(redConversationRecordList, div_ID, this.conversationId, Parm);*/      isHasObj(arr, val, conversationId, Parm) {
           var flag = false; // true为有 false为没有        for (var i = 0; i < arr.length; i++) {
             if (arr[i].conversationId === val) {
               switch (Parm.MsgType) {
                 case 0:                if (Parm.MsgInfo.MsgString) {
                     if (Parm.MsgInfo.MsgString.length > 10) {
                       arr[i].msgString = Parm.MsgInfo.MsgString.substring(0, 10) + '...';                  } else {
                       arr[i].msgString = Parm.MsgInfo.MsgString;                  }                }                break;              case 1:                arr[i].msgString = '[图片]';                break;              case 3:                arr[i].msgString = '[视频]';                break;              case 4:                arr[i].msgString = '[位置]';                break;              case 5:                arr[i].msgString = '[文件]';                break;              case 99:                arr[i].msgString = '撤回了一条消息';                break;            }            if (conversationId != val) {
                 arr[i].newMsgStatus = true;              break;            }          } else {
               console.log('elseIF');            break;          }        }        return flag;      },      // 检测数组-显示消息      isHasObjShowMsg(arr, val, conversationId, Parm) {
           console.log('val');        console.log(val);        /*   var flag = false; // true为有 false为没有           for (var i = 0; i < arr.length; i++) {             if (arr[i].conversationId === val && conversationId != val) {               console.log('zhixc');               arr[i].newMsgStatus = true;             } else {               this.getTalkContent(Parm);               // break;             }           }*/        return flag;      },      /**       * 查询preIndex之后的聊天记录       * type :0 组聊,3 单聊，6 临时组聊       * tempGroupId : 临时组Id,       * gid : 组Id,       * uid : 发送方subid,       * did : 接收方subId       */      getTalkContent(obj, times) {
           times = times || 1;        obj.index = this.preIndex;        MessageApi.queryMsgAfterIndex(obj).then(res => {
             // 返回数据          var msgPre = res.obj.list;          //PrintTime("获取历史记录："+msgHis.length+","+JSON.stringify(msgHis));          if (msgPre.length > 0) {
               // times = 6            console.log('this.conversationId');            console.log(this.conversationId);            if (this.conversationId == '' || this.conversationId == null || this.conversationId == undefined) {
                 return;            }            this.showMsg(msgPre, 1);          } else {
               return;          }        }).catch(err => {
             // 异常情况        });        /* if (times < 6) {           times++           setTimeout(() => {             this.getTalkContent(obj, times)           }, 100)         }*/      },      //查看历史记录      getTalkHistorys() {
           if (this.hisIndex == '') {
             return;        }        var params = {
             tempGroupId: this.conversationId,          gid: this.conversationId,          uid: this.conversationId,          did: this.user.userId,          index: this.hisIndex,          ps: 10,          flag: 2,          // MsgType:5        };        if (this.conversationType == 1) {
             params.type = 3;        } else if (this.conversationType > 1) {
             params.type = 0;        }        MessageApi.queryHisMsg(params).then(res => {
             // 返回数据          var msgHis = res.obj.list;          console.log(msgHis);          //PrintTime("获取历史记录："+msgHis.length+","+JSON.stringify(msgHis));          if (msgHis.length > 0) {
               this.showMsg(msgHis, 0);          } else {
               this.messagesHisMsgs = '没有更多历史消息';          }        }).catch(err => {
             // 异常情况        });      },      //展示消息      showMsg(msgList, flag) {
           var html = '';        let newMesList = msgList;        let newMesListA = [];        // for (let i = msgList.length - 1; i >= 0; i--) {
           for (let i = 0; i < msgList.length; i++) {
             newMesListA.push(this._hisDeal(msgList[i]));        }        for (let a = 0; a < newMesList.length; a++) {
             newMesList[a]['temporaryMes'] = newMesListA[a];        }        //展示聊天记录        if (flag == 1) {
             if (newMesList.length > 0) {
               for (let i = 0; i < newMesList.length; i++) {
                 this.showMesDatas.push(newMesList[0]);              break;            }          }          setTimeout(() => {
               var messageShowDiv = document.getElementById('msg_display');            messageShowDiv.scrollTop = messageShowDiv.scrollHeight;          });          this.preIndex = msgList[0].mid;        }        //初始化数据，默认展示最近一条数据        else if (flag == -1) {
             this.showMesDatas = newMesList;          let a = newMesList.length;          for (let i = 0; i < a; i++) {
               console.log('newMesList[a].time');            console.log(newMesList[0].time);            break;          }        }        //展示历史记录        else if (flag == 0) {
             for (let i = 0; i < newMesList.length; i++) {
               this.showMesDatas.unshift(newMesList[i]);          }          this.hisIndex = msgList[msgList.length - 1].mid;        }      },      //消息下载文件      downLownFiles(e, msgUrl) {
           let thisId = e.target.id;        switch (thisId) {
             case 'downLoadMsg': //下载文件            let ipUrl = 'http://' + this.user.ip + ':' + msgUrl;            let a = document.createElement('a');            //            a.setAttribute('download', '');            a.href = ipUrl;            a.click();            break;        }      },      //右击事件处理      rightMessageClick(msgId, uid) {
           console.log('右击事件');        this.withdrawMessageSmgId = msgId; //保存消息id        if (uid === this.user.userId) {
             this.setMsg(msgId);        } else {
             return;        }      },      //撤回，删除，取消      handelBackEvent(e, msgId) {
           let thisId = e.target.id;        switch (thisId) {
             case 'delMsg': //删除消息            this.delMsg(msgId);            break;          case 'withdrawMessage'://撤回消息            this.withdrawMessage(msgId);            break;          case 'cancelBack'://取消            $('#backMsg').remove();            console.log('cancelBack');            break;        }      },      setMsg(num) {
           $('#backMsg').remove();        var backMsghtml = '
     
      ' +            '
      删除' +            '
      撤回' +            '
      取消' +            '
     
';        $('#msg' + num).append(backMsghtml);      },      //删除消息(刪除当前列表数据，并没有删除数据库）      delMsg(msgId) {
           if (msgId != null && msgId != '') {
             console.log('当前选中消息对象' + msgId);          let deleteMesDatas = this.showMesDatas;          for (let i = 0; i < deleteMesDatas.length; i++) {
               if (JSON.stringify(deleteMesDatas[i]).indexOf(JSON.stringify(msgId)) != -1) {
                 deleteMesDatas.splice(i, 1);              this.withdrawMessageShow = false;              $('#backMsg').remove();              this.showMesDatas = deleteMesDatas;              $('#backMsg').remove();              break;            }          }        }      },      //取消消息      cancelBack(msgId) {
         },      //撤回消息      withdrawMessage(msgId) {
           if (msgId != null && msgId != '') {
             function findshowMes(findshowMesDatas) {
               for (let i = 0; i < findshowMesDatas.length; i++) {
                 if (findshowMesDatas[i].mid == msgId) {
                   var msgInfo = findshowMesDatas[i];                return msgInfo;                break;              }            }          }          let msgInfo = findshowMes(this.showMesDatas);          var MsgIndex;//消息编号          var TargetType;//对象类型	Int	0-终端 1-群组 2-调度员 3-临时组          var TargetInfo = {
   };//对象信息          if (msgInfo.gid === 0) {
               MsgIndex = msgInfo.mid;            TargetType = 0;            TargetInfo = {
                 UserID: msgInfo.uid,              UserNumber: this.conversationNumber,              UserName: msgInfo.una,            };          } else {
               MsgIndex = msgInfo.mid;            TargetType = 1;            TargetInfo = {
                 GroupID: msgInfo.gid,              GroupNumber: this.conversationNumber,              GroupName: msgInfo.gna,            };          }          let rspOBJ = DispatchmessageCtrl.backMsg(MsgIndex, TargetType, TargetInfo);          if (rspOBJ === 0) {
               // Dispatchmessage.backMsg(TargetInfo)      //处理消息撤回后的界面            let deleteMesDatas = this.showMesDatas;            console.log(deleteMesDatas);            for (let i = 0; i < deleteMesDatas.length; i++) {
                 if (JSON.stringify(deleteMesDatas[i]).indexOf(JSON.stringify(msgId)) != -1) {
                   deleteMesDatas.splice(i, 1);                console.log(deleteMesDatas);                this.withdrawMessageShow = false;                this.showMesDatas = deleteMesDatas;                this.getTalkHistorys();                $('#backMsg').remove();                break;              }            }          } else {
               // Dispatchmessage.backMsg(-1)            // 失败后的处理,参数传入-1            this.withdrawMessageShow = false;            this.$message.warning('撤回失败');            $('#backMsg').remove();          }        } else {
             $('#backMsg').remove();        }      },      //处理聊天记录      _hisDeal(msg) {
           let html = '';        let emojiList = [          '[大笑]', '[可爱]', '[色]', '[嘘]', '[亲]', '[呆]', '[口水]', '[呲牙]', '[鬼脸]', '[害羞]',          '[偷笑]', '[调皮]', '[可怜]', '[敲]', '[惊讶]', '[流感]', '[委屈]', '[流泪]', '[嚎哭]', '[惊恐]',          '[怒]', '[酷]', '[不说]', '[鄙视]', '[阿弥陀佛]', '[奸笑]', '[睡着]', '[口罩]', '[努力]', '[抠鼻孔]',          '[疑问]', '[怒骂]', '[晕]', '[呕吐]', '[强]', '[弱]', '[OK]', '[拳头]', '[胜利]', '[鼓掌]',          '[发怒]', '[骷髅]', '[便便]', '[火]', '[溜]', '[爱心]', '[心碎]', '[钟情]', '[唇]', '[戒指]',          '[钻石]', '[太阳]', '[有时晴]', '[多云]', '[雷]', '[雨]', '[雪花]', '[爱人]', '[帽子]', '[皇冠]',          '[篮球]', '[足球]', '[垒球]', '[网球]', '[台球]', '[咖啡]', '[啤酒]', '[干杯]', '[柠檬汁]', '[餐具]',          '[汉堡]', '[鸡腿]', '[面条]', '[冰淇淋]', '[沙冰]', '[生日蛋糕]', '[蛋糕]', '[糖果]', '[葡萄]', '[西瓜]',          '[光碟]', '[手机]', '[电话]', '[电视]', '[声音开启]', '[声音关闭]', '[铃铛]', '[锁头]', '[放大镜]', '[灯泡]',          '[锤头]', '[烟]', '[炸弹]', '[枪]', '[刀]', '[药]', '[打针]', '[钱袋]', '[钞票]', '[银行卡]',          '[手柄]', '[麻将]', '[调色板]', '[电影]', '[麦克风]', '[耳机]', '[音乐]', '[吉他]', '[火箭]', '[飞机]',          '[火车]', '[公交]', '[轿车]', '[出租车]', '[警车]', '[自行车]', '[汗]', '[拜一拜]', '[惊喜]', '[流汗]',          '[卖萌]', '[默契眨眼]', '[烧香拜佛]', '[晚安]', '[握手]'];        var type = parseInt(msg.type);        let nginxIp = this.user.ip;        let port = 1603;        let msgType = 0;        let MsgNum = 0;        function returnHtml(isMine) {
             var bPoint, img, img_loc, yuyinUrl, times, durationHt, j, fileUrl;          var locPic = './images/message/msg_loc.png';          switch (type) {
               case 0:       //文字              var str = msg.mss.toString();              for (var i = 0; i < str.length; i++) {
                   var x = 0, y = 0, z = 0;                for (var j = 0; j < str.length; j++) {
                     if (str[j] === '[') {
                       x = j;                  }                  if (str[j] === '/') {
                       y = j;                  }                  if (str[j] === ']') {
                       z = j;                  }                  if (z != 0 && str[x + 1] === '2' && str[x + 2] === 'f' && y > x && y < z) {
                       str = str.substring(0, x) + '@' + str.substring(x + 3, y) + str.substring(z + 1, str.length);                  }                }              }              for (let i = 0; i < emojiList.length; i++) {
                   let emojiStr = emojiList[i];//[发怒];                for (var j = 0; j < str.length; j++) {
                     /*http://192.168.0.201:1603/Airport/images/emoji/emoji_*/                  str = str.replace(emojiStr,                      '
     ');                  /*     str = str.replace(emojiStr,                           '
     ');                    */                }              }              html += '
     ' + str +                  '';              break;            case 1:             //图片              html += '
     ';              // this.temporaryMes = html              break;            case 3:             //视频              html +=                  '
     
      ';              break;            case 104://位置消息 //4地图不考虑              if (ScsMapConstantTemp.mapType === 'openLayers') {
                   img = '';                img_loc = '
     ';              } else {
                   bPoint = GpsConvert.gcj02tobd09(msg.lng / 100000, msg.lat / 100000);                img = '
     ';                img_loc = '';              }              html +=                  // '
     '+img+msg.loc+img_loc+'';                  '
     地图';              break;            case 5:              var index = msg.url.indexOf('/');              var str0 = msg.url.substring(0, index);              str0 = parseInt(str0) + 1 + '';              var str1 = msg.url.substring(index);              var Url = str0 + str1;              msg.url = Url;              html +=                  '
     文件下载';              break;            case 99:              let cls = 'tar';              html = ' 
     
      ' +                  '
      
       
      
      
       ' + msg.una + '撤回了一条消息' + '
      
';              break;          }        }        function ScsMapConstantTemp() {
           };        ScsMapConstantTemp.mapType = 'baidu'; //"baidu" or "openLayers"        /*   if(typeof openLayersURL!="undefined"){             ScsMapConstantTemp.openLayersURL=openLayersURL;           }*/        if (msg.uid == this.user.userId) {
             returnHtml(true);        } else {
             returnHtml(false);        }        return html;      },      //发送文本消息----------      //选中表情      ChooseEmojis(index, name) {
           for (let i in this.faceList1) {
             if (index == i) {
               this.messagesContents += name;          }        }      },      listen(event) {
           // console.log($(".rongcloud-text").val());        /*   var keyCode = e.keyCode || e.which || e.charCode;        var ctrlKey = e.ctrlKey || e.metaKey;        // 判断 ctrl+enter 换行        if (ctrlKey && keyCode == 13) {          var str = $(".inputmsg").val();          $(".inputmsg").val(str + "\n");        } else if (keyCode == 13) {          // 阻止提交自动换行          e.preventDefault();          // 获取发送按钮id，调用 发送按钮事件          this.sendMessage(); // 发送文本        }*/        // if (!event.ctrlKey  && event.keyCode === 13) {
           if (event.shiftKey && event.keyCode === 13) {
             console.log('33换行');          /* this.sendMessage(); // 发送文本           event.preventDefault(); // 阻止浏览器默认换行操作*/        } else if (event.keyCode === 13) {
             event.preventDefault(); // 阻止浏览器默认换行操作*/          this.sendMessage(); // 发送文本        }      },      //上传图片      openUploadImgDialogVisible() {
           if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {
             this.$Message.error('请先选择会话组');          return;        } else {
             this.uploadImgDialogVisible = true;        }      }, //上传文件      openUploadFilesDialogVisible() {
           if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {
             this.$Message.error('请先选择会话组');          return;        } else {
             this.uploadFilesDialogVisible = true;        }      },      sendMessage() {
           if (this.conversationId === '' || this.conversationId === null || this.conversationId === undefined) {
             this.$Message.error('请先选择会话组');          return;        } else {
             let obj = {
               conversationId: this.conversationId,            name: this.conversationName,            number: this.conversationNumber,            conversationType: this.conversationType,          };          // let msgstring = "8998"          let msgstring = this.messagesContents;          if (msgstring.length >= 512) {
               this.$Message.error('发送的消息过长');            return;          } else if (msgstring.trim() == '') {
               this.$Message.warning('请不要发送空白消息');            return;          } else {
               console.log('msgstring');            console.log(msgstring);            let user_id = this.user.userId;            DispatchmessageCtrl.sendMessage(obj, msgstring, user_id);          }        }      },      //发送图片文件---------      //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用      changeUploadImg(file) {
           console.log(file);        //保存消息图片        // this.messageImgPost = file.raw;        const isJPG = file.raw.type === 'image/jpeg';        const isPNG = file.raw.type === 'image/png';        // const isLt2M = file.size / 1024 / 1024 < 2;        if (!isJPG && !isPNG) {
             this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');          //执行清空图片          // this.$refs.uploadPhoto.clearFiles();         // 取消时在文件列表中删除该文件          this.$refs.uploadPhoto.handleRemove(file);          return (isJPG || isPNG);        } else {
             this.newArrayImg.push(file.raw);          this.messageImgPost = this.newArrayImg;          console.log('this.messageImgPost');          console.log(this.messageImgPost);        }      },      //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用      changeUploadFiles(file) {
           this.newArrayFiles.push(file.raw);        this.messageFilesPost = this.newArrayFiles;        console.log('this.messageFilesPost');        console.log(this.messageFilesPost);      },      //取消上传图片      cancelUploadPhoto() {
           this.uploadImgDialogVisible = false;        //执行清空图片        this.$refs.uploadPhoto.clearFiles();      },      //取消上传文件      cancelUploadFile() {
           this.uploadFilesDialogVisible = false;        //执行清空文件列表        this.$refs.uploadFiles.clearFiles();      },      //上传发送图片      beforeUploadImg(file) {
           console.log('file');        console.log(file);        const isJPG = file.type === 'image/jpeg';        const isPNG = file.type === 'image/png';        // const isLt2M = file.size / 1024 / 1024 < 2;        if (!isJPG && !isPNG) {
             this.$message.error('上传图片只能是 JPG 或者 PNG 格式!');          //执行清空图片          this.$refs.uploadPhoto.clearFiles();        }        return isJPG && isPNG;      },      //上传发送多图片      submitUpload() {
           let messageImgPostArray = this.messageImgPost;        if (messageImgPostArray.length > 0) {
             for (let i = 0; i < messageImgPostArray.length; i++) {
               let formData1 = new FormData();            formData1.append('pocFile', messageImgPostArray[i]);            MessageApi.upload(formData1).then(res => {
                 // 发送图片              this.relativePhotoUrl = res.obj.relativeUrl;              this.sendPhoto(res.obj.relativeUrl);              this.handleRemove();              //执行清空图片              this.$refs.uploadPhoto.clearFiles();              //关闭弹框              this.uploadImgDialogVisible = false;              this.messageImgPost = '';              //清空保存图片数组              this.newArrayImg = [];              console.log(this.messageImgPost);            }).catch(err => {
                 // 异常情况              this.$message.error('发送失败!');              //执行清空图片              this.$refs.uploadPhoto.clearFiles();              //关闭弹框              this.uploadImgDialogVisible = false;              this.messageImgPost = '';            });          }        } else {
             this.$Message.warning('请先选择图片');        }        /*   let formData1 = new FormData();           formData1.append('pocFile', this.messageImgPost);           // this.$refs.upload.submit();           MessageApi.upload(formData1).then(res => {             // 发送图片             console.log('发送文件和图片、、、、、、、');             this.relativePhotoUrl = res.obj.relativeUrl;             this.sendPhoto(res.obj.relativeUrl);             this.handleRemove();             //执行清空图片             this.$refs.uploadPhoto.clearFiles();             //关闭弹框             this.uploadImgDialogVisible = false;             this.messageImgPost = '';             console.log(this.messageImgPost);           }).catch(err => {             // 异常情况           });*/      },      //上传发送文件      submitUploadFile() {
           let messageFilesPostArray = this.messageFilesPost;        console.log('messageFilesPostArray');        console.log(messageFilesPostArray);        if (messageFilesPostArray.length > 0) {
             for (let i = 0; i < messageFilesPostArray.length; i++) {
               let formData = new FormData();            formData.append('pocFile', messageFilesPostArray[i]);            MessageApi.upload(formData).then(res => {
                 this.relativePhotoUrl = res.obj.relativeUrl;              this.sendfile(res.obj.relativeUrl, messageFilesPostArray[i].name);              this.handleRemove();              //执行清空文件              this.$refs.uploadFiles.clearFiles();              this.newArrayFiles = [];              //关闭弹框              this.uploadImgDialogVisible = false;              this.messageImgPost = '';            }).catch(err => {
                 // 异常情况              this.$message.error('发送失败!');              //执行清空文件              this.$refs.uploadFiles.clearFiles();              this.newArrayFiles = [];              //关闭弹框              this.uploadImgDialogVisible = false;              this.messageImgPost = '';            });          }        } else {
             this.$Message.warning('请先选择文件');        }      },      handleRemove(file, fileList) {
           console.log(file, fileList);      },      clearFilesPhoto() {
           console.log('clearFilesPhoto');      },      handlePictureCardPreview(file) {
           this.messageImgPost = file.url;        this.dialogVisible = true;      },      handlePreview(file) {
           console.log(file);      }      ,      //发送图片      sendPhoto(url) {
           let obj = {
             conversationId: this.conversationId,          name: this.conversationName,          number: this.conversationNumber,          conversationType: this.conversationType,        };        let user_id = this.user.userId;        DispatchmessageCtrl.sendPhoto(obj, url, user_id);      }      ,      //发送文件消息      sendfile(url, name) {
           console.log(url);        let obj = {
             conversationId: this.conversationId,          name: this.conversationName,          number: this.conversationNumber,          conversationType: this.conversationType,        };        let url1 = 'http://192.168.0.201:8080/upload//2020-07-11//29f81a2b36e94454862b8913d0c56839.exe';        let url12 = '8080/upload//image/2020-07-11//a62da9d769ec4f87a9ae664d1cc882f3.jpg';        let user_id = this.user.userId;        let fileName = name;        DispatchmessageCtrl.sendfile(fileName, url, obj, user_id);      }      ,    }
     
    
   

转载地址：http://mocg.baihongyu.com/